<template>
	<view class="page-height">
		<i-top-bar title="消息通知"> </i-top-bar>
		<view class="page-content">
			<view class="list" v-if="data_list.length">
				<view class="item" v-for="(item,index) in data_list" :key="index" @click="onOpenDetail(item)">
					<text class="time">{{formatTime(item.createtime)}}</text>
					<view class="bg">
						<text class="title">{{item.title}}</text>
						<view class="content">
							<text class="u-line-2">{{item.content}}</text>
						</view>
						<text class="view-text">立即查看</text>
					</view>
				</view>

			</view>
			<view class="list" style="margin-top: 100rpx;" v-else>
				<i-empty></i-empty>
			</view>

		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				data_list: [],
				page: 0,
				page_size: 10,
				is_more: false,
			};
		},

		onLoad() {
			this.getList('init')
		},
		onPullDownRefresh() {
			this.getList('init')
			this.getUserInfo()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 800)
		},
		onReachBottom() {
			this.getList('more');
		},

		methods: {
			getList(type = 'more') {
				if (type === 'init') {
					this.page = 0;
					this.is_more = true;
				} else if (!this.is_more) {
					return false
				}
				this.page++
				const params = {
					page: this.page,
					limit: this.page_size
				}
				if (this.page === 1) this.data_list = [];
				this.api.post("/api/user/usernews", {
					params: params
				}).then(res => {
					// const list = res
					this.data_list = res
					// this.data_list = [...this.data_list, ...list]
					this.is_more = false

				}).catch(err => {
					console.log(err);
					this.apiErr(err)
				}).finally(() => {
					this.init = false
					this.loadingHide();
				})
			},
			onOpenDetail(item){
				const params = {
					id:item.id,
					title:item.title,
					createtime:item.createtime,
					content:item.content,
				}
				this.openWin(`/pages/user/msg-detail?params=${encodeURIComponent(JSON.stringify(params))}`)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-height {
		background: #ffffff;
	}

	.page-content {
		display: flex;
		flex-direction: column;
		position: relative;
		z-index: 1;
		padding: 0 30rpx 30rpx;
	}

	.list {
		display: flex;
		flex-direction: column;

		.item {
			display: flex;
			flex-direction: column;
			margin-top: 10rpx;


			.time {
				text-align: center;
				font-size: 28rpx;
				color: #333333;
				padding: 24rpx 0;
			}

			.bg {
				display: flex;
				flex-direction: column;
				background-color: #FAFAFA;
				border-radius: 16rpx;
				padding: 0 30rpx;

				.title {
					color: #333333;
					font-size: 30rpx;
					padding: 24rpx 0;
				}

				.content {
					font-size: 28rpx;
					color: #333333;
				}

				.view-text {
					color: #55C29A;
					font-size: 28rpx;
					margin-left: auto;
					padding: 26rpx 0;
				}

			}
		}

	}
</style>